import React, { useState } from 'react';
import classNames from 'classnames';
import { Task } from '../types';

interface TaskItemProps {
  task: Task;
  onToggleStatus: (id: string) => void;
  color: string;
}

const TaskItem: React.FC<TaskItemProps> = ({ task, onToggleStatus, color }) => {
  const [isExpanded, setIsExpanded] = useState(false);
  
  // 检查任务是否接近截止日期（24小时内）
  const isDeadlineSoon = task.deadline && 
    new Date(task.deadline).getTime() - new Date().getTime() < 24 * 60 * 60 * 1000 &&
    !task.completed;
  
  // 检查任务是否重要（优先级高）
  const isImportant = task.priority === 'high';
  
  return (
    <div 
      className={classNames(
        'bg-white border rounded-md p-3 transition-all duration-200 ease-in-out',
        { 'border-red-300': isDeadlineSoon },
        { 'border-gray-300': !isDeadlineSoon }
      )}
    >
      <div className="flex items-start">
        <div className="flex-shrink-0 pt-1">
          <input
            type="checkbox"
            checked={task.completed}
            onChange={() => onToggleStatus(task.id)}
            className={`form-checkbox h-4 w-4 text-${color} rounded border-gray-300 focus:ring-${color}`}
          />
        </div>
        
        <div className="ml-3 flex-1">
          <div 
            className="flex justify-between cursor-pointer"
            onClick={() => setIsExpanded(!isExpanded)}
          >
            <div>
              <p 
                className={classNames(
                  { 'completed-task': task.completed },
                  { 'important-task': isImportant && !task.completed }
                )}
              >
                {task.title}
              </p>
              
              {task.deadline && (
                <p 
                  className={classNames(
                    'text-xs mt-1',
                    { 'task-deadline-soon': isDeadlineSoon },
                    { 'text-gray-500': !isDeadlineSoon || task.completed }
                  )}
                >
                  截止: {new Date(task.deadline).toLocaleDateString()}
                </p>
              )}
            </div>
            
            <div className="flex items-center space-x-1">
              {task.priority === 'high' && (
                <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">
                  高
                </span>
              )}
              {task.priority === 'medium' && (
                <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
                  中
                </span>
              )}
              {task.priority === 'low' && (
                <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
                  低
                </span>
              )}
              
              <svg 
                className={`h-4 w-4 text-gray-500 transform transition-transform ${isExpanded ? 'rotate-180' : ''}`} 
                fill="none" 
                viewBox="0 0 24 24" 
                stroke="currentColor"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
              </svg>
            </div>
          </div>
          
          {isExpanded && task.description && (
            <div className="mt-2 text-sm text-gray-600 border-t pt-2">
              {task.description}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default TaskItem; 